<template>
  <el-row>
    <el-col :span="24">
      <div>
        <div class="filter-content">
          <div class="filter-item" style="width: 100% ">
            <div class="label-content" style="display: flex !important;  justify-content: space-between !important;width: 100% ">
              <div>
                <el-input class="search-input-width elliptical-input" v-model.trim="baseTable.tableReqDto.name" clearable placeholder="模板名称"></el-input>
                <el-button style="margin-left: 10px;height: 34px" :auto-insert-space="true" type="primary" round @click="baseTable.onSearch">
                  <el-icon style="margin-right: 5px;height: 34px"><Search /></el-icon>搜索
                </el-button>
              </div>
              <div>
                <el-button style="margin-left: 20px" :auto-insert-space="true" type="warning" round @click="onNewTemplate"><el-icon style="margin-right: 5px"><Plus /></el-icon>新增模板</el-button>
              </div>
            </div>
          </div>

        </div>
        <el-table class="custom-header-table-2" :data="baseTable.tableData" v-loading="baseTable.tableLoading" stripe style="width: 100%">
          <template v-for="(col,itemindex) in baseTable.tableColumns" :key="col.colKey">
            <el-table-column :header-align="col.align" :align="col.align" :prop="col.colKey" :label="col.title" :width="col.width">
              <template #default="{ row , $index}">
                <table-date-column v-if="col.date" :date="row[col.colKey]" />
                <template v-if="col.colKey === 'marketplace'">
                  <div class="text">
                    <el-tag round style="margin-right: 10px;background-color: #F1F4F9; border-color: #DDDFE6;color: #888888" type="info" effect="dark" v-for="ite in row.marketplace" :key="ite.code">{{ ite.name }}</el-tag>
                  </div>
                </template>
                <template v-if="col.colKey === 'marketplaceName'">
                  <div class="text">
                    <el-tag round style="margin-right: 10px;background-color: #F1F4F9; border-color: #DDDFE6;color: #888888" type="info" effect="dark" >{{ row.marketplaceName }}</el-tag>
                  </div>
                </template>
                <template v-else-if="col.colKey === 'status'">
                  <div class="text" v-text="row.errorMessage"></div>
                </template>
                <template v-else-if="col.colKey === 'opt'">
                  <span @click="onEditTemplate" style="color: #6169FF">编辑</span>
                  <span @click="onDeleteTemplate" style="margin-left: 20px;color: #EA5E56">删除</span>
                </template>
                <template v-else-if="col.colKey === 'index'">
                  <div>{{ $index+1}}</div>
                </template>
              </template>
            </el-table-column>
          </template>
        </el-table>
        <table-pagination :pagination="baseTable.dataPagination" @change="baseTable.onPaginationChange" />
      </div>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import TablePagination from '@/plugins/pair/table-pagination.vue'
import {EditPen, Delete, Search, Plus} from '@element-plus/icons-vue'
import { useDefineTable, useDefineDialog } from '@/plugins/util/global-variable'
import { listingTemplateByPage, deleteListingTemplate } from '@/api/common'
import TableDateColumn from '@/plugins/pair/table-date-column.vue'
import ListingTemplateForm from '@/views/user/listing/listingTemplateForm.vue'
const baseTable = useDefineTable({
  tableReqDto: {
    name: '',
    regions: [],
  },
  request: listingTemplateByPage,
  tableColumns: [
    { colKey: 'index', title: '序号', width: '100' },
    { colKey: 'name', title: '模板名称' },
    // { colKey: 'storeName', title: '绑定店铺', align: 'center' },
    { colKey: 'marketplaceName', title: '绑定站点',  },
    { colKey: 'createTime', title: '添加时间', width: '200' ,date: true },
    { colKey: 'updateTime', title: '更新时间', width: '200', date: true },
    { colKey: 'opt', title: '操作', width: '200'},
  ],
})
const onNewTemplate = () => {
  authorizeFormDialog.open({ templateId: '' })
}

const onEditTemplate = (row: any) => {
  authorizeFormDialog.open({ templateId: row.id })
}

const onDeleteTemplate = (row: any) => {
  deleteListingTemplate(row.id).then(() => {
    baseTable.exeRequest()
  })
}

const authorizeFormDialog = useDefineDialog({
  title: '刊登模板',
  width: 1000,
  component: {
    instance: ListingTemplateForm,
  },
  onConfirm: () => {
    baseTable.exeRequest()
  },
})
</script>
<style scoped lang="scss"></style>
